<template>
  <div class="login-container">
    <div class="login-box">
      <!-- Logo和系统名称 -->
      <div class="logo-area">
        <img
            src="../assets/logo.png"
            alt="系统Logo"
            class="logo"
        />
        <h1 class="system-name">中电-数据流转控制核心</h1>
      </div>

      <!-- 登录表单 -->
      <form @submit.prevent="handleSubmit" class="login-form">
        <!-- 用户名输入 -->
        <div class="form-group">
          <input
              type="text"
              v-model="formData.username"
              @input="clearError('username')"
              placeholder="用户名"
              required
              :class="{ 'error': errors.username }"
          />
          <span class="error-msg">{{ errors.username }}</span>
        </div>

        <!-- 密码输入 -->
        <div class="form-group">
          <input
              type="password"
              v-model="formData.password"
              @input="clearError('password')"
              placeholder="密码"
              required
              :class="{ 'error': errors.password }"
          />
          <span class="error-msg">{{ errors.password }}</span>
        </div>

        <!-- 登录按钮 -->
        <button
            type="submit"
            class="submit-btn"
            :disabled="isSubmitting"
        >
          {{ isSubmitting ? '登录中...' : '登录' }}
        </button>
      </form>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import {useRouter} from 'vue-router'

const router = useRouter()
// 表单数据
const formData = reactive({
  username: '数据管理员',
  password: 'xxxxxxxx'
})

// 错误信息
const errors = reactive({
  username: '',
  password: ''
})

// 提交状态
const isSubmitting = ref(false)

// 清除错误信息
const clearError = (field) => {
  errors[field] = ''
}

// 表单验证
const validateForm = () => {
  let isValid = true

  if (!formData.username.trim()) {
    errors.username = '用户名不能为空'
    isValid = false
  }

  if (!formData.password) {
    errors.password = '密码不能为空'
    isValid = false
  }

  return isValid
}

// 提交处理
const handleSubmit = async () => {
  if (!validateForm()) return

  try {
    isSubmitting.value = true

    // 模拟API调用
    // const response = await fetch('/api/login', {
    //   method: 'POST',
    //   body: JSON.stringify(formData)
    // })

    // 模拟延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    router.push('/')

  } catch (error) {
    console.error('登录失败:', error)
    errors.form = '登录失败，请检查网络连接'
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f6f8fa;
}

.login-box {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.logo {
  width: 25px;
  height: 25px;
  margin-right: 1rem;
}

.system-name {
  font-size: 1.5rem;
  color: #333;
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  position: relative;
}

input {
  width: 95%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

input.error {
  border-color: #f56c6c;
}

.error-msg {
  display: block;
  color: #f56c6c;
  font-size: 0.875rem;
  margin-top: 4px;
  height: 1.25rem;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #66b1ff;
}

.submit-btn:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}
</style>
